<%--
  Created by IntelliJ IDEA.
  User: XBB
  Date: 2021/3/7
  Time: 18:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.3.1.min.js"></script>

    <style>
        /*背景层*/
        #popLayer {
            display: none;
            background-color: #000;
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 10;
            opacity:0.6;
        }

        /*弹出层*/
        #popBox {
            display: none;
            background-color: #FFFFFF;
            z-index: 11;
            width:800px;
            height:600px;
            position:fixed;
            top:0;
            right:0;
            left:0;
            bottom:0;
            margin:auto;
        }
        /*关闭按钮*/
        #popBox .close{
            text-align: right;
            background-color: #F8F8F8;
        }
        #popBox .close a {
            text-decoration: none;
            color: #2D2C3B;
        }
        .faceButton{
            width: 200px;
            padding:8px;
            background-color: #428bca;
            border-color: #357ebd;
            outline:none;
            color: #fff;
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 20px; /* future proofing */
            -khtml-border-radius: 10px; /* for old Konqueror browsers */
            text-align: center;
            vertical-align: middle;
            border: 1px solid transparent;
            font-weight: 900;
            font-size:125%
        }

    </style>
</head>
<body>

<input type="button" name="popBox" value="弹出框" onclick="popBox()">
<div id="popLayer"></div>
<div id="popBox">
    <div class="close" style="line-height:50px;padding-right: 60px">
        <a href="javascript:void(0)" onclick="closeBox()" style="font-size: x-large;font-family: '黑体'">关闭</a>
    </div>
    <div class="content">
        <p align="center">
            <button class="faceButton" id="open">开启摄像头</button>
            <button class="faceButton" id="close">关闭摄像头</button>
            <button class="faceButton" id="CatchCode">验证</button>
        </p>
        <div align="center" style="float: left;">
            <video id="video" autoplay style="width: 100%;height:450px;margin-left: 12%"></video>
            <canvas hidden="hidden" id="canvas" width="500" height="500"></canvas>
        </div>
    </div>
</div>

</body>
<script type="text/javascript">
    var video;//视频流对象
    var context;//绘制对象
    var canvas;//画布对象


    $(function() {
        var flag = false;
        //开启摄像头
        $("#open").click(function() {
            //判断摄像头是否打开
            if (!flag) {
                //调用摄像头初始化
                open();
                flag = true;
            }
        });
        //关闭摄像头
        $("#close").click(function() {
            //判断摄像头是否打开
            if (flag) {
                video.srcObject.getTracks()[0].stop();
                flag = false;
            }
        });
        //拍照
        $("#CatchCode").click(function() {
            if (flag) {
                context.drawImage(video, 0, 0, 330, 250);
                CatchCode();
            } else
                alert("请先开启摄像头!");
        });
    });
    //将当前图像传输到后台
    function CatchCode() {
        //获取图像
        var img = getBase64();
        //Ajax将Base64字符串传输到后台处理
        $.ajax({
            type : "POST",
            async : false,
            url : "/house/faceLogin/searchFace",
            data : {
                img : img
            },
            dataType : "JSON",
            success : function(data) {
                //返回的结果
                //取出对比结果的返回分数，如果分数90以上就判断识别成功了
                if(data.result.user_list[0].score > 80) {
                    //关闭摄像头
                    video.srcObject.getTracks()[0].stop();
                    //提醒用户识别成功
                    alert("识别度为"+data.result.user_list[0].score+"%"+"\n"+"人脸验证成功!");
                    //验证成功跳转页面
                    window.location.href="/house/rent/cIndexInit";
                }else if(data.result.user_list[0].score <= 80){
                    alert("验证失败~"+"\n"+"请重新验证");
                }
            },
            error : function(q, w, e) {
                alert(q + w + e);
            }
        });
    };
    //开启摄像头
    function open() {
        //获取摄像头对象
        canvas = document.getElementById("canvas");
        context = canvas.getContext("2d");
        //获取视频流
        video = document.getElementById("video");
        var videoObj = {
            "video" : true
        }, errBack = function(error) {
            console.log("Video capture error: ", error.code);
        };
        context.drawImage(video, 0, 0, 330, 250);
        //初始化摄像头参数
        if (navigator.getUserMedia || navigator.webkitGetUserMedia
            || navigator.mozGetUserMedia) {
            navigator.getUserMedia = navigator.getUserMedia
                || navigator.webkitGetUserMedia
                || navigator.mozGetUserMedia;
            navigator.getUserMedia(videoObj, function(stream) {
                video.srcObject = stream;
                video.play();
            }, errBack);
        }
    }
    //将摄像头拍取的图片转换为Base64格式字符串
    function getBase64() {
        //获取当前图像并转换为Base64的字符串
        var imgSrc = canvas.toDataURL("image/png");
        //截取字符串
        return imgSrc.substring(22);
    };

    /*点击弹出按钮*/
    function popBox() {
        var popBox = document.getElementById("popBox");
        var popLayer = document.getElementById("popLayer");
        popBox.style.display = "block";
        popLayer.style.display = "block";
    };

    /*点击关闭按钮*/
    function closeBox() {
        var popBox = document.getElementById("popBox");
        var popLayer = document.getElementById("popLayer");
        popBox.style.display = "none";
        popLayer.style.display = "none";
    }
</script>
</html>

